<template>
    <!-- 这里是模板内容，需要添加具体的HTML结构 -->
    <div style="height: 300px">
        <div style="height: 300px" :id="item.user"></div>
    </div>
</template>

<script>
import * as echarts from "echarts";
export default {
    props: {
        item: {
            type: Object,
            required: true,
        },
        type: {
            type: String,
            default: 1,
        },
        num: {
            type: String,
            default: null
        },
    },
    data() {
        return {
            // 这里是组件内部的数据对象，根据需要添加属性
            chartItem: null,
            option: {},
        };
    },
    mounted() {
        var chartDom = document.getElementById(this.item.user);

        this.chartItem = echarts.init(chartDom);
        this.option = {
            title: {
                text: "变化趋势",
            },
            tooltip: {
                trigger: "item",
            },
            legend: {
                data: ["Email", "Union Ads", "Video Ads", "Direct", "Search Engine"],
            },
            grid: {
                left: "3%",
                right: "4%",
                bottom: "3%",
                containLabel: true,
            },
            toolbox: {
                feature: {
                    saveAsImage: {},
                },
            },
            xAxis: {
                type: "category",
                boundaryGap: false,
                data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
            },
            yAxis: {
                type: "value",
            },
            series: [
                {
                    name: "Email",
                    type: "line",
                    stack: "Total",
                    data: [120, 132, 101, 134, 90, 230, 210],
                },
                {
                    name: "Union Ads",
                    type: "line",
                    stack: "Total",
                    data: [220, 182, 191, 234, 290, 330, 310],
                },
                {
                    name: "Video Ads",
                    type: "line",
                    stack: "Total",
                    data: [150, 232, 201, 154, 190, 330, 410],
                },
                {
                    name: "Direct",
                    type: "line",
                    stack: "Total",
                    data: [320, 332, 301, 334, 390, 330, 320],
                },
                {
                    name: "Search Engine",
                    type: "line",
                    stack: "Total",
                    data: [820, 932, 901, 934, 1290, 1330, 1320],
                },
            ],
        };
        // this.chartItem.setOption(this.option);
        this.dataInIt();
    },
    methods: {
        dataInIt(data) {
            //按天
            if (this.type == 1) {
                let item1 = this.item.data;
                // X轴
                let Xsice = [];
                item1.forEach((ele) => {
                    ele.data.forEach((eleInner) => {
                        if (Xsice.includes(this.setTime(eleInner.date, 2))) {
                        } else {
                            Xsice.push(this.setTime(eleInner.date, 2));
                        }
                    });
                });
                Xsice.sort((a, b) => a - b);
                Xsice.map((ele, index) => {
                    Xsice[index] = this.setTime(ele);
                });
                this.option.xAxis.data = Xsice;

                // Y轴
                let IndexY = null;
                let yAxis = [];
                item1.forEach((ele, index) => {
                    ele.data.forEach((eleInner, indexInner) => {

                        for (var i = 0; i < eleInner.information.length; i++) {

                            if (
                                yAxis.some((ele, Yindex) => {
                                    IndexY = Yindex;
                                    return ele.name === eleInner.information[i].key;
                                })
                            ) {
                                yAxis[IndexY].data[(item1.length - 1) - index] =
                                    eleInner.information[i].errorNumber.split("%")[0]

                            } else {
                                let arr = new Array(3)
                                arr[(item1.length - 1) - index] = eleInner.information[i].errorNumber.split("%")[0]
                                let obj = {
                                    name: eleInner.information[i].key,
                                    type: "line",
                                    stack: "Total",
                                    data: arr
                                };
                                yAxis.push(obj);
                            }
                        }
                    });
                });


                this.option.series = yAxis;

                this.chartItem.setOption(this.option);
            }
            //按次
            if (this.type == 2) {
                let item1 = this.item.data
                let Xsice = new Array()
                item1.forEach(ele => {
                    let num = ele.order * this.num
                    Xsice.push(num)
                })
                Xsice.sort((a, b) => a - b)
                this.option.xAxis.data = Xsice;


                // Y轴
                let IndexY = null;
                let yAxis = [];
                item1.forEach((ele, index) => {


                    for (var i = 0; i < ele.information.length; i++) {

                        if (
                            yAxis.some((ele1, Yindex) => {
                                IndexY = Yindex;
                                return ele1.name === ele.information[i].key;
                            })
                        ) {
                            yAxis[IndexY].data[(item1.length - 1) - index] =
                                ele.information[i].errorNumber.split("%")[0]

                        } else {
                            let arr = new Array(item1.length)
                            arr[(item1.length - 1) - index] = ele.information[i].errorNumber.split("%")[0]
                            let obj = {
                                name: ele.information[i].key,
                                type: "line",
                                stack: "Total",
                                data: arr
                            };
                            yAxis.push(obj);
                        }
                    }

                });

                this.option.series = yAxis;

                this.chartItem.setOption(this.option);


            }
        },

        //调整时间显示
        setTime(time, type = 1) {
            // 确保传入的参数是 Date 对象
            if (!(time instanceof Date)) {
                time = new Date(time);
            }
            if (type == 1) {
                // 获取年、月、日、时、分、秒
                let year = time.getFullYear();
                let month = time.getMonth() + 1; // 月份是从 0 开始的，所以要加 1
                let day = time.getDate();
                let hours = time.getHours();
                let minutes = time.getMinutes();
                let seconds = time.getSeconds();

                // 格式化月份、日期、小时、分钟和秒，确保它们都是两位数
                month = month < 10 ? "0" + month : month;
                day = day < 10 ? "0" + day : day;
                hours = hours < 10 ? "0" + hours : hours;
                minutes = minutes < 10 ? "0" + minutes : minutes;
                seconds = seconds < 10 ? "0" + seconds : seconds;

                // 组合成所需的格式
                let formattedDate = `${year}-${month}-${day}`;

                return formattedDate;
            } else {
                return time.getTime();
            }
        },
    },
};
</script>

<style lang="scss" scoped>
/* 这里是组件的样式内容，使用SCSS语法 */
</style>
